﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        gPaint.defaultUIStyle = "dark";
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }

        let backView  = new FCView();
        backView.dock = "fill";
        backView.backColor = "rgb(0,0,0)";
        addView(backView, gPaint);

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        let iconImage = null;
        let loadImage = false;

        /*
        * 绘制圆形文字
        */
        let drawRoundText = function(paint, text, font, color1, color2, x, y, sx){
            let wxSize = paint.textSize(text, font);
            paint.fillRoundRect(color1, x - 5, y - 3, x + wxSize.cx + 5, y + wxSize.cy + 2, 4);
            paint.drawRoundRect(color2, 1, 0, x - 5, y - 3, x + wxSize.cx + 5, y + wxSize.cy + 2, 4);
            if(sx != 0){
                paint.drawLine(color2, 1, 0, x + sx, y - 3, x + sx, y + wxSize.cy + 2);
            }
            paint.drawText(text, "rgb(220,220,220)", "Default,14", x, y);
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
            paint.fillRect("rgb(0,0,0)", 0, 0, view.size.cx, view.size.cy);
            if(!loadImage){
                let image = new Image();
                image.onload = function () {
                    iconImage = image;
                    invalidate(gPaint);
                };
                image.src = "https://www.jjmfc.com/images/taode.png";
                loadImage = true;
            }else{
                let iTick = parseInt(tick / (360 / 5));
                if(iTick > 4){
                    iTick = 4;
                }
                let tWidth = 350;
                if(paint.isMobile){
                    tWidth = backView.size.cx;
                }
                if(true){
                    let dR = 200;
                    let divRect = new FCRect(tWidth - dR, 105, tWidth, 105 + dR);
                    let alpha = "230";
                    let colors = new Array();
                    colors.push("rgb(75, 137, 220)");
                    colors.push("rgb(140, 192, 81)");
                    colors.push("rgb(219, 68, 83)");
                    colors.push("rgb(246, 187, 67)");
                    colors.push("rgb(150, 123, 220)");
                    let strColor = colors[iTick].replace("rgb(", "").replace(")", "");
                    if(paint.defaultUIStyle == "dark"){
                        paint.fillEllipse("rgba(15,15,15," + alpha.toString() + ")", divRect.left, divRect.top, divRect.right, divRect.bottom);
                        paint.drawEllipse("rgb(75,75,75)", 1, 0, divRect.left, divRect.top, divRect.right, divRect.bottom);
                    }else{
                        paint.fillEllipse("rgba(240,240,240," + alpha.toString() + ")", divRect.left, divRect.top, divRect.right, divRect.bottom);
                        paint.drawEllipse("rgb(150,150,150)", 1, 0, divRect.left, divRect.top, divRect.right, divRect.bottom);
                    }
                    let oX = divRect.left + (divRect.right - divRect.left) / 2;
                    let oY = divRect.top + (divRect.bottom - divRect.top) / 2;
                    let r = (divRect.right - divRect.left) / 2;
                    let rPoints = new Array();
                    let rPoints2 = new Array();
                    let rPoints3 = new Array();
                    let rPoints4 = new Array();
                    let tFont = "Default,14";
                    for(let i = 0; i < 6; i++){
                        let angle = i * 60 - 60 + tick;
                        let angle2 = angle;
                        let cR = r * parseInt(rates[i]) / 100;
                        let cX = oX + (cR * Math.cos(angle2 * 3.14 / 180));
                        let cY = oY + (cR * Math.sin(angle2 * 3.14 / 180));
                        let cX2 = oX + (r * Math.cos(angle * 3.14 / 180));
                        let cY2 = oY + (r * Math.sin(angle * 3.14 / 180));
                        let cX3 = oX + (r / 3 * Math.cos(angle * 3.14 / 180));
                        let cY3 = oY + (r / 3 * Math.sin(angle * 3.14 / 180));
                        let cX4 = oX + (r * 2 / 3 * Math.cos(angle * 3.14 / 180));
                        let cY4 = oY + (r * 2 / 3 * Math.sin(angle * 3.14 / 180));
                        rPoints.push(new FCPoint(cX, cY));
                        rPoints2.push(new FCPoint(cX2, cY2));
                        rPoints3.push(new FCPoint(cX3, cY3));
                        rPoints4.push(new FCPoint(cX4, cY4));
                        let cX5 = oX + ((r + 25) * Math.cos(angle * 3.14 / 180));
                        let cY5 = oY + ((r + 25) * Math.sin(angle * 3.14 / 180));
                    }
                    let dColor = "rgb(30,30,30)";
                    if(paint.defaultUIStyle == "light"){
                        dColor = "rgb(220,220,220)";
                    }
                    paint.drawLine(dColor, 1, 0, rPoints2[0].x, rPoints2[0].y, rPoints2[3].x, rPoints2[3].y);
                    paint.drawLine(dColor, 1, 0, rPoints2[1].x, rPoints2[1].y, rPoints2[4].x, rPoints2[4].y);
                    paint.drawLine(dColor, 1, 0, rPoints2[2].x, rPoints2[2].y, rPoints2[5].x, rPoints2[5].y);
                    paint.drawPolygon(dColor, 1, 0, rPoints3);
                    paint.drawPolygon(dColor, 1, 0, rPoints4);
                    paint.fillPolygon("rgba(" + strColor + ",60)", rPoints);
                    paint.drawPolygon("rgba(" + strColor + ",200)", 1, 0, rPoints);
                }
                paint.fillRect("rgb(25,25,25)", 0, 0, backView.size.cx, 80);
                if(iconImage){
                    paint.drawImage(iconImage, 10, 5, 80, 75);
                    paint.drawRect("rgb(75,137,220)", 2, 0, 10, 5, 80, 75);
                }
                let font = "Default,18";
                let font2 = "Default,14";
                let text = "陶德";
                let tSize = paint.textSize(text, font);
                paint.drawText(text, "rgb(255,255,255)", font, 100, 17);
                drawRoundText(paint, "微信号  suade1984", "Default,14", "rgba(140,192,81,100)", "rgba(140,192,81,150)", 155, 18, 46);
                paint.drawText("经济学专业(文科)", "rgb(200,200,200)", font2, 100, 50);
                paint.drawText("创业等级5", "rgb(246,187,67)", font2, 220, 50);
                paint.drawText("工作经历", "rgb(150,150,150)", font2, 10, 90);
                if(iTick == 0){
                    drawRoundText(paint, "大智慧龙软  601819.SH", "Default,14", "rgba(246,187,67,100)", "rgba(246,187,67,150)", 15, 115, 73);
                }else{
                    drawRoundText(paint, "大智慧龙软  601819.SH", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 115, 73);
                }
                if(iTick == 1){
                    drawRoundText(paint, "东方财富  300059.SZ", "Default,14", "rgba(246,187,67,100)", "rgba(246,187,67,150)", 180, 115, 60);
                }else{
                    drawRoundText(paint, "东方财富  300059.SZ", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 180, 115, 60);
                }
                if(iTick == 2){
                    drawRoundText(paint, "东吴证券  601555.SH", "Default,14", "rgba(246,187,67,100)", "rgba(246,187,67,150)", 15, 145, 60);
                }else{
                    drawRoundText(paint, "东吴证券  601555.SH", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 145, 60);
                }
                if(iTick >= 3){
                    drawRoundText(paint, "德意志银行  美股DB", "Default,14", "rgba(246,187,67,100)", "rgba(246,187,67,150)", 165, 145, 73);
                }else{
                    drawRoundText(paint, "德意志银行  美股DB", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 165, 145, 73);
                }
                paint.drawText("担任职业", "rgb(150,150,150)", font2, 10, 180);
                if(iTick < 2){
                    drawRoundText(paint, "市场销售", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 15, 205, 0);
                }else{
                    drawRoundText(paint, "市场销售", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 205, 0);
                }
                if(iTick < 2){
                    drawRoundText(paint, "产品负责人", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 88, 205, 0);
                    drawRoundText(paint, "CTO  研发百夫长", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 175, 205, 32);
                }else{
                    drawRoundText(paint, "产品负责人", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 88, 205, 0);
                    drawRoundText(paint, "CTO  研发百夫长", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 175, 205, 32);
                }
                if(iTick >= 3){
                    drawRoundText(paint, "交易员", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 15, 235, 0);
                    drawRoundText(paint, "量化对冲专家", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 75, 235, 0);
                }else{
                    drawRoundText(paint, "交易员", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 235, 0);
                    drawRoundText(paint, "量化对冲专家", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 75, 235, 0);
                }
                if(iTick == 2){
                    drawRoundText(paint, "股票经纪人", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 175, 235, 0);
                    drawRoundText(paint, "期货顾问", "Default,14", "rgba(150,123,220,100)", "rgba(150,123,220,150)", 260, 235, 0);
                }
                else{
                    drawRoundText(paint, "股票经纪人", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 175, 235, 0);
                    drawRoundText(paint, "期货顾问", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 260, 235, 0);
                }
                paint.drawText("擅长技能", "rgb(150,150,150)", font2, 10, 270);
                if(iTick == 1){
                    drawRoundText(paint, "核心研发", "Default,14", "rgba(233,87,62,100)", "rgba(233,87,62,150)", 15, 295, 0);
                }else{
                    drawRoundText(paint, "核心研发", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 295, 0);
                }
                if(iTick == 0){
                    drawRoundText(paint, "团队领导", "Default,14", "rgba(233,87,62,100)", "rgba(233,87,62,150)", 88, 295, 0);
                }else{
                    drawRoundText(paint, "团队领导", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 88, 295, 0);
                }
                if(iTick == 2){
                    drawRoundText(paint, "销售应酬", "Default,14", "rgba(233,87,62,100)", "rgba(233,87,62,150)", 163, 295, 0);
                }else{
                    drawRoundText(paint, "销售应酬", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 163, 295, 0);
                }
                if(iTick >= 3){
                    drawRoundText(paint, "写作  短视频", "Default,14", "rgba(233,87,62,100)", "rgba(233,87,62,150)", 237, 295, 32);
                }else{
                    drawRoundText(paint, "写作  短视频", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 237, 295, 32);
                }

                paint.drawText("当前工作", "rgb(150,150,150)", font2, 10, 326);
                let works = new Array();
                works.push("花卷猫国产基础框架作者");
                works.push("人工智能多设备联合机器人");
                works.push("农村工作和生活+自媒体");
                works.push("合规金融分析和量化科技");
                works.push("科学工作和养生爱好者");
                let lTop = 350;
                for(let i = 0; i < works.length; i++){
                    let str = works[i];
                    let sFont = "Default,16";
                    paint.fillRoundRect("rgba(25,25,25,200)", 10, lTop, tWidth - 10, lTop + 45, 0);
                    paint.fillRoundRect("rgb(50,50,50)", 10, lTop, 10 + 45, lTop + 45, 0);
                    paint.drawRoundRect("rgb(75,75,75)", 1, 0, 10, lTop, tWidth - 10, lTop + 45, 0);
                    let bColor = "rgb(42,138,195)";
                    let bColor2 = "rgba(42,138,195, 200)";
                    paint.drawLine("rgb(75,75,75)", 1, 0, 10 + 45, lTop, 10 + 45, lTop + 45);
                    let sSize = paint.textSize((i + 1).toString(), sFont);
                    paint.drawText((i + 1).toString(), "rgb(200,200,200)", sFont, 10 + (45 - sSize.cx) / 2, lTop + (45 - sSize.cy) / 2);
                    paint.drawText(str, "rgb(200,200,200)", sFont, 10 + 55, lTop + (45 - sSize.cy) / 2);                  
                    if(iTick == i){
                        let overTimes = tick % 30 * 12;
                        let dRect = new FCRect(10, lTop, tWidth - 10, lTop + 45);
                        let dWidth = Math.min(dRect.right - dRect.left, dRect.bottom - dRect.top) / 2;
                        let dInterval = 0;
                        paint.drawRect(bColor, 1, 0, dRect.left, dRect.top, dRect.right, dRect.bottom);
                        if (overTimes < 90) {
                            let fSize = (90 - overTimes) * (dWidth - dInterval) / 60;
                            let eSize = overTimes * (dWidth - dInterval) / 60;
                            paint.drawLine(bColor2, 3, 0, dRect.right - fSize, dRect.top, dRect.right, dRect.top);
                            paint.drawLine(bColor2, 3, 0, dRect.right, dRect.top, dRect.right, dRect.top + eSize);
                        }
                        else if (overTimes < 180) {
                            let fSize = (90 - (overTimes - 90)) * (dWidth - dInterval) / 60;
                            let eSize = (overTimes - 90) * (dWidth - dInterval) / 60;
                            paint.drawLine(bColor2, 3, 0, dRect.right, dRect.bottom - fSize, dRect.right, dRect.bottom);
                            paint.drawLine(bColor2, 3, 0, dRect.right, dRect.bottom, dRect.right - eSize, dRect.bottom);
                        }
                        else if (overTimes < 270) {
                            let fSize = (90 - (overTimes - 180)) * (dWidth - dInterval) / 60;
                            let eSize = (overTimes - 180) * (dWidth - dInterval) / 60;
                            paint.drawLine(bColor2, 3, 0, dRect.left, dRect.bottom, dRect.left + fSize, dRect.bottom);
                            paint.drawLine(bColor2, 3, 0, dRect.left, dRect.bottom, dRect.left, dRect.bottom - eSize);
                        }
                        else if (overTimes < 360) {
                            let fSize = (90 - (overTimes - 270)) * (dWidth - dInterval) / 60;
                            let eSize = (overTimes - 270) * (dWidth - dInterval) / 60;
                            paint.drawLine(bColor2, 3, 0, dRect.left, dRect.top, dRect.left + eSize, dRect.top);
                            paint.drawLine(bColor2, 3, 0, dRect.left, dRect.top, dRect.left, dRect.top + fSize);
                        }
                    }
                    lTop += 55;
                }
                paint.drawText("研发中心", "rgb(150,150,150)", font2, 10, 635);
                drawRoundText(paint, "江阴市  峭岐镇袁家庄111号南部农田", "Default,14", "rgba(170,178,189,100)", "rgba(170,178,189,150)", 15, 660, 45);
                return;
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaintBorder = function (view, paint, clipRect) {
            onPaintBorderDefault(view, paint, clipRect);
        };

        /*
        * 更新布局的实现方法
        * views:视图集合
         */
        gPaint.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight;
            scaleCanvas(gPaint);
            updateViewDefault(gPaint.views);
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();

        };

        let rates = new Array();
        rates.push(98);
        rates.push(98);
        rates.push(90);
        rates.push(20);
        rates.push(80);
        rates.push(90);

        let aimrates = new Array();

        let tick = 0;

        let checkPaint = function () {
            tick++;
            if(tick > 360){
                tick = 0;
            }
            if(tick % (360 / 5) == 0){
                aimrates = new Array();
                aimrates.push(Math.random() * 50 + 50);
                aimrates.push(Math.random() * 50 + 50);
                aimrates.push(Math.random() * 50 + 50);
                aimrates.push(Math.random() * 50 + 50);
                aimrates.push(Math.random() * 50 + 50);
                aimrates.push(Math.random() * 50 + 50);
            }
            if(aimrates.length > 0){
                for(let i = 0; i < aimrates.length; i++){
                    if(rates[i] != aimrates[i]){
                        if(rates[i] < aimrates[i]){
                            rates[i] = rates[i] + (aimrates[i] - rates[i]) / 3;
                        }else if(rates[i] > aimrates[i]){
                            rates[i] = rates[i] + (aimrates[i] - rates[i]) / 3;
                        }
                        if (Math.abs(rates[i] - aimrates[i]) < 2){
                            rates[i] =  aimrates[i];
                        }
                    }
                }
            }
            invalidate(gPaint);
        };

        //注册事件
        addMouseDownEvent(canvas, gPaint, onMouseDown);
        addMouseMoveEvent(canvas, gPaint, onMouseMove);
        addMouseWheelEvent(canvas, gPaint, onMouseWheel);
        addMouseUpEvent(canvas, gPaint, onMouseUp, onClick);
        addTouchBeginEvent(canvas, gPaint, onTouchBegin);
        addTouchMoveEvent(canvas, gPaint, onTouchMove);
        addTouchEndEvent(canvas, gPaint, onTouchEnd, onClick);
        updateViewDefault(gPaint.views);
        updateViewDefault(gPaint.views);
        //刷新界面
        invalidate(gPaint);
        setInterval(checkPaint, 30);
    </script>
</body>
</html>
